<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #app{

    }
    .table-striped tbody tr:nth-child(odd) td{
        background-color: #D4E6F1;
    }
    a:hover{
        color: red;
    }
    .g{
        color: green;
    }
    .r{
        color: red;
    }
</style>
<body>
<div id="app" align="center">
<!--  顶部-->
<div><span>♝</span>用户管理 <a href="../test4.html">✙新增</a></div>
<!--查询-->
<div>
    账号：<input type="text">
    昵称：<input type="text">
    姓名：<input type="text">
    手机：<input type="text">
    状态：<input type="text" list="qq">
          <datalist id="qq">
              <option>工作中</option>
              <option>休息中</option>
              <option>放假中</option>
          </datalist>
    <input type="button" value="查询">
</div>
<!--表格-->
<div>
    <table class="table-striped" border="1px" cellspacing="0px" width="75%" style="text-align: center;height: 500px">
        <tr>
            <td></td>
            <td>登录账号</td>
            <td>用户昵称</td>
            <td>员工姓名</td>
            <td>归属机构</td>
            <td>归属公司</td>
            <td>电子邮箱</td>
            <td>手机号码</td>
            <td>办公电话</td>
            <td>更新时间</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>user6</td>
            <td>用户06</td>
            <td>用户06</td>
            <td>财务部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>2</td>
            <td>user13</td>
            <td>用户13</td>
            <td>用户13</td>
            <td>研发部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>3</td>
            <td>user1</td>
            <td>用户01</td>
            <td>用户01</td>
            <td>企管部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>4</td>
            <td>user4</td>
            <td>用户04</td>
            <td>用户04</td>
            <td>财务部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>5</td>
            <td>user2</td>
            <td>用户21</td>
            <td>用户21</td>
            <td>研发部</td>
            <td>青岛公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>6</td>
            <td>user14</td>
            <td>用户14</td>
            <td>用户14</td>
            <td>研发部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        <tr>
            <td>7</td>
            <td>user7</td>
            <td>用户07</td>
            <td>用户07</td>
            <td>研发部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>8</td>
            <td>user10</td>
            <td>用户10</td>
            <td>用户10</td>
            <td>研发部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>9</td>
            <td>user3</td>
            <td>用户03</td>
            <td>用户03</td>
            <td>企管部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>
        <tr>
            <td>10</td>
            <td>user12</td>
            <td>用户12</td>
            <td>用户12</td>
            <td>研发部</td>
            <td>济南公司</td>
            <td>user@test.com</td>
            <td>18566666666</td>
            <td>05188888888</td>
            <td>2020-12-09&nbsp;09:51</td>
            <td class="g">正常</td>
            <td class="r">▤</td>
        </tr>

    </table>
</div>
</body>
</div>

</html>
